[제이쿼리] 자식 요소 선택방법 및 찾기, children()

제이쿼리를 사용하여 간단하게 자식요소를 선택하는 방법을 알아보려고 합니다. 자식요소를 선택하는 방법에는 children() 함수가 많이 사용됩니다. 이 외에도 find() 함수가 존재하는데 오늘은 children()에 대하여 자세히 알아봅니다.

# 제이쿼리 children() 자식요소 얻기

위에 잠시 언급한 find() 그리고 오늘 알아볼 children()의 차이점을 알아보겠습니다. 이 둘의 차이점이라면 children()은 부모 요소의 바로 아래 단계인 자식요소만 선택할 수 있으나, find()는 부모 태그의 모든 하위 요소의 자식을 선택하여 가져올 수 있다는 점이 차이점입니다. 그럼 children()의 간단한 사용방법은 아래와 같습니다.

$(element).children(option)

괄호안의 선택옵션은 필수가 아닌 선택입니다. 만약 옵션을 입력할 경우 특정 요소만 필터링하여 반환하는 것이 가능합니다. 즉 아래와 같이 사용할 수 있습니다.

! children() 옵션 사용하여 찾기 예제보기

아래는 red라는 클래스명을 가진 자식 요소만 찾아서 반환합니다.
@ children.html

@ children.js

위 코드를 실행하면 red 클래스를 가진 요소만 선택됩니다. 그럼 아래에서 다른 방법의 예제를 알아보세요.

# children() 함수 예제보기

이번 예제는 모든 자식요소를 jQuery 셀렉터로 선택하는 방법을 알아보려합니다. 여기서는 div 태그의 자식 요소를 먼저 선택해보겠습니다. 그리고 이를 변수 childrens에 저장해보겠습니다.

@ children.html

@ children.js
 
실행하면 위 태그에서 div 태그의 모든 자식요소가 변수에 저장되었을 것입니다. 즉 변수 childrens는 div 태그 요소의 모든 자식요소들이 저장되었습니다.

(참고로 일반적으로 제이쿼리 엘리먼트 요소를 변수로 저장할때는 $를 앞 또는 뒤에 추가하여 나타냅니다. 즉 childrens 보다는 $childrens 또는 childrens$로 사용합니다.)

# 자식 요소에서 원하는 요소만 선택하는 방법

그럼 또 다른 예제입니다. 앞에도 알아봤지만 옵션을 선택하면 자식요소의 필터링... 즉 좀 더 정확한 자식요소만 가져올 수 있습니다.
(자식요소들 중에서 원하는 요소만 선택할 수도 있음.)

바로 괄호 안의 매개변수로 선택사항을 추가입력하면 됩니다. 아래 예제를 봐주세요.

! 자식 요소 중에서 span 태그 요소만 가져오기

이번에는 자식 요소에서 span 태그 요소만 가져오는 방법입니다.
@ children.html
태그의 이름이 span인 것만 가져오기 위해 아래처럼 스크립트를 작성 후 실행합니다.

@ children.js

이제 div 자식요소중에서 span 태그 요소만를 선택되었습니다.

# 마치면서

바로 아래의 자식요소를 가져오기 위하여 몇 가지 예제를 사용하여 알아보았습니다. 자식요소를 얻는 방법은 매우 자주 사용되므로 반드시 알아두어야하는 필수 메소드 중 하나입니다. 제이쿼리 사용시 선택자를 돕는 메소드들은 몇가지가 있는데 children() 역시 매우 중요합니다.